
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demo</title>
<body>


 <div class='iosSlider'>
     <div class='slider'>
         <!-- slides --> 
         <div class='slide'>
             <a href="http://di.cn.aijia798.com/attachment/information/201407/1405823288fq2ev.jpg">
                 <img src="http://di.cn.aijia798.com/attachment/information/201407/1405823288fq2ev.jpg"></a>
         </div>
         <!-- slides --> 
         <div class='slide'>
             <a href="http://di.cn.aijia798.com/attachment/information/201407/1405822655o8kza.jpg">
                 <img src="http://di.cn.aijia798.com/attachment/information/201407/1405822655o8kza.jpg"></a>
         </div>
     </div>
 </div>
 <div class='slideSelectors'>
     <div class='item'></div>
     <div class='item'></div>
 </div>


<script type = 'text/javascript' src = 'jquery.js'></script> 

<!-- iosSlider plugin -->
<script type="text/javascript" src = "slider.js"></script> 

<style>
.iosSlider{position:relative;top:0;left:0;overflow:hidden;width:640px;height:242px}.iosSlider .slider{width:100%;height:100%}.iosSlider .slider .slide{float:left;width:640px;height:242px}.banner .slider img{width:640px;height:242px}.sliderContainer .slideSelectors{position:relative;bottom:25px;left:0;width:100px;margin:0 auto;z-index:1;height:10px}.sliderContainer .slideSelectors .item{float:left;width:10px;height:10px;background:#fff;margin:0 0 0 10px;opacity:.25;filter:alpha(opacity=25);border-radius:5px}.sliderContainer .slideSelectors .selected{background:#fff;opacity:1;filter:alpha(opacity=100)}
</style>
<!-- iosSlider plugin -->
<script>
    $(document).ready(function() {
        $('.iosSlider').iosSlider({
            desktopClickDrag: true,
            snapToChildren: true,
            navSlideSelector: '.sliderContainer .slideSelectors .item',
            autoSlide: true,
            scrollbar: true,
            onSlideChange: slideChange,
            scrollbarContainer: '.sliderContainer .scrollbarContainer',
            scrollbarMargin: '0',
            scrollbarBorderRadius: '0'
        });
    });
    function slideChange(args) {
        $('.sliderContainer .slideSelectors .item').removeClass('selected');
        $('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
    }
</script>



</body>
</html>